<template>
  <div class="home-banner" v-if="banners && banners.length">
    <el-carousel height="800px">
      <el-carousel-item v-for="item in banners" :key="item.url">
        <img class="banner-image" :src="item.url" />

         <div class="banner-titles">
          <!-- <h2 class="title">{{item.title}}</h2> -->
          <h3 class="title">{{item.desc}}</h3>
          <h1 class="title">{{item.title}}</h1>
          <el-button :href="item.link" class="read-more" type="primary">更多</el-button>
        </div>
      </el-carousel-item>
    </el-carousel>

    <div class="banner-search-wrapper">
      <div class="banner-search">
        <el-input
          v-model="keyword"
          clearable
          size="large"
          @keyup.enter.native="onSearch"
          placeholder="搜索物种、数据等"
        />
        <el-button @click="onSearch" class="btn-search" type="primary">
          <i class="el-icon-search" />
        </el-button>
      </div>
      <h1>江苏生物多样性数据搜索平台</h1>
    </div>
  </div>
</template>

<script>
import { getBanners } from '@/api'
export default {
  name: "HomeBanner",
  data() {
    return {
      keyword: '',
      banners: [],
    }
  },
  methods: {
    onSearch() {
      console.log(this.keyword)
      if(this.keyword) {
        this.$router.push({
          name: 'Search',
          query: { keyword: this.keyword }
        })
      }
    },
  },
  created(){
    getBanners().then(res => {
      this.banners = res
    })
  }
};
</script>

<style lang="scss">
.home-banner{
  position: relative;

  .banner-image{
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .banner-titles{
    position: absolute;
    z-index: 10;
    top: 20%;
    left: 20%;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    .title{
      margin-bottom: 12px;
    }
  }

  .banner-search-wrapper{
    position: absolute;
    z-index: 10;
    bottom: 35%;
    left: 50%;
    transform: translateX(-50%);

    .banner-search{
      display: flex;
      align-items: center;
      padding: 6px;
      background-color: rgba(0,0,0,.4);
      .el-input{
        width: 450px;
        .el-input__inner{
          border-radius: 4px 0 0 4px;
        }
      }
      .btn-search{
        height: 40px;
        padding: 0 20px;
        background-color: rgb(16, 90, 45);
        background-color: var(--primary-color);
        border-radius: 0 4px 4px 0;
        font-size: 20px;
        font-weight: bold;
      }
    }
    & > h1 {
      text-align: center;
      margin: 12px 0 0;
      color: #fff;
      font-size: 26px;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }
  }

  .el-carousel{
    .el-carousel__item{
      & > img{
        display: block;
        width: 100%;
      }
    }
  }
}
</style>